<template>
  <div>
    <div class="dashboard-line-box" style="display: flex">
      <div id="caseDetail">
        <el-table
          border
          :data="testCaseSimple"
          :cell-style="{ textAlign: 'center' }"
          :show-header="false"
        >
          <el-table-column property="label" label="label" width="120" />
          <el-table-column property="name" label="label" width="278" />
        </el-table>
      </div>
      <div id="testcases"></div>
      <div id="testSteps"></div>
    </div>
    <div></div>
  </div>
</template>

<script setup>
name = "ReportDetail";
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import "echarts/theme/macarons";
// import * as echarts from 'echarts';
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  LegendComponent,
  TitleComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
]);

let pieOption;
const reportData = ref({});
let testCasesData = [];
let testStepsData = [];
const testCaseSimple = ref([]);

const initData = () => {
  reportData.value = {
    success: true,
    stat: {
      testcases: { total: 10, success: 7, fail: 3 },
      teststeps: { total: 270, successes: 200, failures: 70 },
    },
    time: { start_at: "2022-06-01T18:31:07.489339+08:00", duration: 0.5088207 },
    platform: {
      httprunner_version: "v4.1.0-beta",
      go_version: "go1.18",
      platform: "windows-amd64",
    },
    details: [
      {
        name: "测试名称0",
        success: true,
        stat: { total: 3, successes: 3, failures: 0 },
        time: {
          start_at: "2022-06-01T18:31:07.8227227+08:00",
          duration: 0.0166467,
        },
        in_out: {
          config_vars: { base_url: "http://localhost:8081/" },
          export_vars: { "": null },
        },
        records: [
          {
            ID: 0,
            parntID: 6,
            name: "Header1",
            step_type: "request",
            success: true,
            elapsed_ms: 5,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 4,
              StartTransfer: 4,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 5,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 7,
            name: "Header2",
            step_type: "request",
            success: true,
            elapsed_ms: 3,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 3,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 5,
            name: "Header",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
            export_vars: { Extract: null },
          },
        ],
        root_dir: "",
      },
      {
        name: "测试名称1",
        success: true,
        stat: { total: 3, successes: 3, failures: 0 },
        time: {
          start_at: "2022-06-01T18:31:07.8598116+08:00",
          duration: 0.0139837,
        },
        in_out: {
          config_vars: { base_url: "http://localhost:8081/" },
          export_vars: { "": null },
        },
        records: [
          {
            ID: 0,
            parntID: 6,
            name: "Header1",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 4,
              StartTransfer: 4,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 7,
            name: "Header2",
            step_type: "request",
            success: true,
            elapsed_ms: 3,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 3,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 5,
            name: "Header",
            step_type: "request",
            success: true,
            elapsed_ms: 3,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 3,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
            export_vars: { Extract: null },
          },
        ],
        root_dir: "",
      },
      {
        name: "测试名称2",
        success: true,
        stat: { total: 3, successes: 3, failures: 0 },
        time: {
          start_at: "2022-06-01T18:31:07.8955395+08:00",
          duration: 0.0170075,
        },
        in_out: {
          config_vars: { base_url: "http://localhost:8081/" },
          export_vars: { "": null },
        },
        records: [
          {
            ID: 0,
            parntID: 6,
            name: "Header1",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 4,
              StartTransfer: 4,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 7,
            name: "Header2",
            step_type: "request",
            success: true,
            elapsed_ms: 5,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 4,
              StartTransfer: 4,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 5,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 5,
            name: "Header",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
            export_vars: { Extract: null },
          },
        ],
        root_dir: "",
      },
      {
        name: "测试名称3",
        success: true,
        stat: { total: 3, successes: 3, failures: 0 },
        time: {
          start_at: "2022-06-01T18:31:07.9340496+08:00",
          duration: 0.0168644,
        },
        in_out: {
          config_vars: { base_url: "http://localhost:8081/" },
          export_vars: { "": null },
        },
        records: [
          {
            ID: 0,
            parntID: 6,
            name: "Header1",
            step_type: "request",
            success: true,
            elapsed_ms: 5,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 5,
              StartTransfer: 5,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 5,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 7,
            name: "Header2",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 4,
              StartTransfer: 4,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 5,
            name: "Header",
            step_type: "request",
            success: true,
            elapsed_ms: 4,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 3,
              StartTransfer: 3,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 4,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
            export_vars: { Extract: null },
          },
        ],
        root_dir: "",
      },
      {
        name: "测试名称4",
        success: true,
        stat: { total: 3, successes: 3, failures: 0 },
        time: {
          start_at: "2022-06-01T18:31:07.9725276+08:00",
          duration: 0.0256321,
        },
        in_out: {
          config_vars: { base_url: "http://localhost:8081/" },
          export_vars: { "": null },
        },
        records: [
          {
            ID: 0,
            parntID: 6,
            name: "Header1",
            step_type: "request",
            success: true,
            elapsed_ms: 9,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 9,
              StartTransfer: 9,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 9,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 7,
            name: "Header2",
            step_type: "request",
            success: true,
            elapsed_ms: 7,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 7,
              StartTransfer: 7,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 7,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
          },
          {
            ID: 0,
            parntID: 5,
            name: "Header",
            step_type: "request",
            success: true,
            elapsed_ms: 6,
            httpstat: {
              Connect: 0,
              ContentTransfer: 0,
              DNSLookup: 0,
              NameLookup: 0,
              Pretransfer: 0,
              ServerProcessing: 5,
              StartTransfer: 5,
              TCPConnection: 0,
              TLSHandshake: 0,
              Total: 5,
            },
            data: {
              success: true,
              req_resps: {
                request: {
                  body: {},
                  data: { Form: "Form" },
                  headers: {
                    "Content-Type": "application/json; charset=utf-8",
                    Header: "Header",
                  },
                  method: "GET",
                  params: { Params: "Params" },
                  url: "Header",
                },
                response: {
                  body: '""',
                  cookies: {},
                  headers: {
                    "Access-Control-Allow-Origin": "*",
                    Connection: "keep-alive",
                    "Content-Length": "0",
                    Date: "Wed, 01 Jun 2022 10:31:07 GMT",
                    "Keep-Alive": "timeout=5",
                  },
                  proto: "HTTP/1.1",
                  status_code: 404,
                },
              },
            },
            content_size: 0,
            export_vars: { Extract: null },
          },
        ],
        root_dir: "",
      },
    ],
  };
  testCaseSimple.value.push({
    label: "运行状态",
    name: reportData.value.success,
    key: "success",
  });
  testCaseSimple.value.push({
    label: "开始时间",
    name: reportData.value.time.start_at,
    key: "start_at",
  });
  testCaseSimple.value.push({
    label: "运行时长",
    name: reportData.value.time.duration,
    key: "duration",
  });

  testCasesData = [
    { value: reportData.value.stat.testcases["success"], name: "成功" },
    { value: reportData.value.stat.testcases["fail"], name: "失败" },
  ];
  testStepsData = [
    { value: reportData.value.stat.teststeps["successes"], name: "成功" },
    { value: reportData.value.stat.teststeps["failures"], name: "失败" },
  ];
  testCaseSimple.value.push({
    label: "用例数",
    name: reportData.value.stat.testcases["total"],
    key: "caseTotal",
  });
  testCaseSimple.value.push({
    label: "接口数",
    name: reportData.value.stat.teststeps["total"],
    key: "stepTotal",
  });
};

initData();

pieOption = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "0%",
    left: "center",
  },
  color: ["#91cc75", "#ee6666", "yellow", "blue", "purple"],
  series: [
    {
      name: "用例运行情况",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          fontSize: "40",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: testCasesData,
    },
  ],
};
onMounted(async () => {
  pieOption.series[0].data = testCasesData;
  pieOption.series[0].name = "用例运行情况";
  const testCaseDom = document.getElementById("testcases");
  const testCaseChart = echarts.init(testCaseDom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  testCaseChart.setOption(pieOption);

  pieOption.series[0].data = testStepsData;
  pieOption.series[0].name = "接口运行情况";
  const testStepDom = document.getElementById("testSteps");
  const testStepChart = echarts.init(testStepDom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  testStepChart.setOption(pieOption);
});
</script>

<style lang="scss" scoped>
.dashboard-line-box {
  .dashboard-line {
    background-color: #fff;
    height: 360px;
    width: 100%;
  }
  .dashboard-line-title {
    font-weight: 600;
    margin-bottom: 12px;
  }
}

#testcases,
#testSteps {
  height: 270px;
  width: 270px;
}
#caseDetail {
  width: 400px;
}
</style>
